<html>

<head>
    <meta charset="utf-8">
    <title>添加<?php print $name; ?></title>
    <base href="{{ base_path() }}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="theme/admin/assets/layui/css/layui.css">
    <link rel="stylesheet" href="theme/admin/assets/css/style.css">
    <script src="theme/admin/assets/js/jquery.min.js"></script>
    <script src="theme/admin/assets/js/sortable.min.js"></script>
</head>

<body>
    <div class="pd-20 <?php print $type; ?>-add">
        {!! hunter_form_render('layui', $form) !!}
    </div>
    <script src="theme/admin/assets/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layedit', 'layer', 'upload'], function() {
            var form = layui.form;
            var layedit = layui.layedit;
            var upload = layui.upload;
            var layer = layui.layer;

            <?php foreach ($fields as $field): ?>
              <?php if($field['html_type'] == 'textarea'): ?>

              var <?php print $field['name']; ?>_index = layedit.build('<?php print $field['name']; ?>',{
                uploadImage: {
              		url:"admin/safe/upload"
              		,type: 'post'
                }
              }); //建立编辑器

              form.verify({
                 <?php print $field['name']; ?>_content: function(value) {
                     return layedit.sync(<?php print $field['name']; ?>_index);
                 }
              });

                <?php elseif($field['html_type'] == 'image'): ?>
<?php if($field['html_type_setting']['image_type'] == 'single'): ?>
            //图片上传
            var <?php print $field['name']; ?>Upload = upload.render({
              elem: '#<?php print $field['name']; ?>btn' //绑定元素
              ,url:"admin/safe/upload" //上传接口
              ,field: '<?php print $type; ?>-<?php print $field['name']; ?>-file'
              ,data: {accept: 'images', exts: 'jpg|png|gif|bmp|jpeg'}
              ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
              }
              ,done: function(result){
                layer.closeAll('loading'); //关闭loading
                if(result.code == 0){
                  document.getElementById('<?php print $field['name']; ?>').value = result.data.full_path_new_name;
                  $('#<?php print $field['name']; ?>_preview').show();
                  document.getElementById('<?php print $field['name']; ?>-preview').src = result.data.full_path_new_name;
                }else {
                  layer.msg(result.msg, {
                      icon: 5
                  });
                }
              }
              ,error: function(){
                layer.closeAll('loading'); //关闭loading
                layer.msg('上传失败!', {
                    icon: 5
                });
              }
            });
          <?php else: ?>
            //多文件列表示例
            var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
              elem: '#<?php print $field['name']; ?>List'
              ,url:"admin/safe/upload"
              ,field: '<?php print $field['name']; ?>-file'
              ,multiple: true
              ,auto: false
              ,bindAction: '#<?php print $field['name']; ?>ListAction'
              ,data: {accept: 'images', exts: 'jpg|png|gif|bmp|jpeg'}
              ,choose: function(obj){
                var files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                  var tr = $(['<tr id="upload-'+ index +'" class="drag-handle" data-image="'+ file.name +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td></td>'
                    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td></td>'
                    ,'<td>'
                      ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                      ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                  ,'</tr>'].join(''));

                  //单个重传
                  tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                  });

                  //删除
                  tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                  });

                  demoListView.append(tr);
                });
              }
              ,done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                  var tr = demoListView.find('tr#upload-'+ index)
                  ,tds = tr.children();
                  tds.eq(1).html('<img src="'+res.data.full_path_new_name+'">');
                  tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                  tds.eq(4).html('<textarea name="up_photos['+ index +'][des]" style="width:300px;height:60px"></textarea><input type="hidden" name="up_photos['+ index +'][img]" value="'+res.data.full_path_new_name+'">');
                  tds.eq(5).html(''); //清空操作

                  Sortable.create(demoList, {
                    group: "up_photos",
                    handle: '.drag-handle',
                    animation: 150,
                    dataIdAttr: 'data-image',
                    filter: '.demo-delete',
                    onFilter: function (evt) {
                      evt.item.parentNode.removeChild(evt.item);
                    }
                  });

                  return;
                }
                this.error(index, upload);
              }
              ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
              }
            });
          <?php endif; ?>
              <?php elseif($field['html_type'] == 'file'): ?>

            //文件上传
            var <?php print $field['name']; ?>Upload = upload.render({
              elem: '#<?php print $field['name']; ?>btn' //绑定元素
              ,url:"admin/safe/upload" //上传接口
              ,accept: '<?php print $field['html_type_setting']['file_accept']; ?>' //允许上传的文件类型
              ,exts: '<?php print $field['html_type_setting']['file_exts']; ?>' //允许上传的文件扩展名
              ,size: <?php print $field['html_type_setting']['file_size']; ?> //最大允许上传的文件大小
              ,data: {accept: '<?php print $field['html_type_setting']['file_accept']; ?>', exts: '<?php print $field['html_type_setting']['file_exts']; ?>'}
              ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
              }
              ,done: function(result){
                layer.closeAll('loading'); //关闭loading
                document.getElementById('<?php print $field['name']; ?>').value = result.data.full_path_new_name;
              }
              ,error: function(){
                layer.closeAll('loading'); //关闭loading
                layer.msg('上传失败!', {
                    icon: 5
                });
              }
            });
              <?php endif; ?>
            <?php endforeach; ?>

            //监听提交
            form.on('submit(<?php print $type; ?>Add)', function(data) {
                $.ajax({
                    type: "POST",
                    url: "admin/<?php print $type; ?>/add", //后台程序地址
                    data: data.field, //需要post的数据
                    success: function(msg) { //后台程序返回的标签，比如我喜欢使用1和0 表示成功或者失败
                        var index = parent.layer.getFrameIndex(window.name);
                        if (!msg) {
                            layer.msg('操作失败', {
                                icon: 5
                            });

                            parent.layui.jquery("#iframe_status").val('0');
                            parent.layer.close(index);
                        } else {
                            parent.layui.jquery("#iframe_status").val('1');
                            parent.layer.close(index);
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>
